<template>
  <div style="margin: 20px">
    <el-form label-width="160px" label-position="left" style="margin-top: 20px; width: 80%">
      <el-form-item label="类型">
        <el-select filterable v-model="newIncome.CI_Type" style="width: 300px" @input="
          newIncome.CI_Name = types.find(
            (x) => x.EnumValue == newIncome.CI_Type
          ).EnumTxt
          ">
          <el-option v-for="(item, index) in types" :key="index" :label="item.EnumTxt"
            :value="item.EnumValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属">
        <el-select filterable v-model="newIncome.CI_EmpID" style="width: 300px">
          <el-option v-for="(item, index) in employees" :key="index" :value="item.ECV_TargetID" :label="item.USR_Name">
            <span style="color: red" v-if="item.EMP_Status != 1">[{{ item.EMP_StatusDesc
            }}]</span>【{{ item.USR_Name }}】{{ item.USR_Phone | encodePhone }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开票金额">
        <span>{{ newIncome.CI_ChargeSum }}元</span>
      </el-form-item>
      <el-form-item label="有效公估费">
        <span>{{ newIncome.CI_UsingAssessSum }}元</span>
      </el-form-item>
      <el-form-item label="创收公估费" v-if="newIncome.CI_ExtraAssessSum">
        <span>{{ newIncome.CI_ExtraAssessSum }}元</span>
      </el-form-item>
      <el-form-item label="标准作业提成率(%)" v-if="newIncome.CI_Type == 10">
        <el-input-number v-model="newIncome.CI_StdJobRate" placeholder="请输入标准作业提成率(%)"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="贡献率" v-if="newIncome.CI_Type == 10 || newIncome.CI_Type == 90">
        <el-input-number v-model="newIncome.CI_ContributionRate" placeholder="请输入贡献率(%)"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="创收提成率(%)" v-if="newIncome.CI_Type == 25">
        <el-input-number v-model="newIncome.CI_ExtJobRate" placeholder="请输入创收提成率(%)"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="业务提成率(%)" v-if="newIncome.CI_Type == 30">
        <el-input-number v-model="newIncome.CI_SaleRate" placeholder="请输入业务提成率" style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="经纪费(%)" v-if="newIncome.CI_Type == 40">
        <el-input-number v-model="newIncome.CI_BrokerRate" placeholder="请输入经纪费(%)"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="作业提成扣除率(%)" v-if="newIncome.CI_Type == 20">
        <el-input-number v-model="newIncome.CI_BrokerDeductRate" placeholder="请输入作业提成扣除率"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="费用率奖罚(%)" v-if="newIncome.CI_Type == 80">
        <el-input-number v-model="newIncome.CI_OtherRate" placeholder="请输入费用率奖罚(%)"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="后勤提成率(%)" v-if="newIncome.CI_Type == 90">
        <el-input-number v-model="newIncome.CI_LogisticsRate" placeholder="请输入标准作业提成"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="差旅垫付扣减(%)" v-if="newIncome.CI_Type == 60">
        <el-input-number v-model="newIncome.CI_TravelDeductRate" placeholder="请输入差旅垫付扣减"
          style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="应付金额" v-if="[50, 70, 100].find((x) => x == newIncome.CI_Type)">
        <el-input-number v-model="newIncome.CI_Fee" placeholder="请输入应付金额（扣减项目请输入负数）"></el-input-number>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="newIncome.CI_Remark" rows="3" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addIncome()">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getIncomeTypes,
  getEmployees,
  addIncome,
  getCaseBaseSum,
} from '@/api/core/caseIncome'
export default {
  props: ['caseId'],
  data: function () {
    return {
      types: [],
      employees: [],
      newIncome: {},
    }
  },
  methods: {
    getCaseBaseSum() {
      getCaseBaseSum(this.caseId).then(({ data }) => {
        this.newIncome.CI_ChargeSum = data.chargeSum
        this.newIncome.CI_UsingAssessSum = data.usingAssessSum
        this.newIncome.CI_ExtraAssessSum = data.extAssessSum
      })
    },
    getIncomeTypes() {
      getIncomeTypes().then(({ data }) => {
        this.types = data
      })
    },
    getEmployees() {
      getEmployees().then(({ data }) => {
        this.employees = data
      })
    },
    addIncome() {
      this.newIncome.CI_CaseID = this.caseId
      addIncome(this.newIncome).then(() => {
        this.$emit('success', this.newIncome)
      })
    },
  },
  created: function () {
    this.getCaseBaseSum()
    this.getEmployees()
    this.getIncomeTypes()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.row {
  height: 100%;
}

.col {
  height: 100%;
}

.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}

.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
